<template>
	<view class="content">
		<view class="head">
			<view class="head_left">
				<i class="iconfont iconyue-xian"></i>
				<view class="head_left_title">余额(元)</view>
				<view class="head_left_num">¥{{money}}</view>
			</view>
			<!-- <view class="head_right">
				<i class="iconfont iconjifen"></i>
				<view class="head_right_title">学情分</view>
				<view class="head_right_num">1200</view>
			</view> -->
		</view>
		<view class="row1">
			<navigator hover-class="false" class="item" :url="item.type ? item.url + money : item.url" v-for="(item,index) in listCont"
			 :key="index">
				<view class="item_left"><i :class="item.icon"></i><text>{{item.name}}</text></view>
				<view><i class="iconfont iconjiantou"></i></view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_show: true,
				is_display: true,
				money: 0,
				listCont: [{
					name: '充值',
					icon: 'iconfont iconchongzhi',
					url: 'balanceRecharge?money=',
					type: true //是否携带动态参数
				}, {
					name: '学情明细',
					icon: 'iconfont iconxueqingmingxi',
					url: '/pages/mine/study',
					type: false //是否携带动态参数
				}, {
					name: '会员卡订单',
					icon: 'iconfont iconwodedingdan',
					url: '/pages/membernew/orderList',
					type: false //是否携带动态参数
				}]
			}
		},

		onShow() {
			this.getData();
		},
		methods: {
			getData: function() {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						this.money = data.money;
					}
				});
			}
		}
	}
</script>

<style>
	.is_show,
	.is_display {
		display: none;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(243, 243, 243, 1);
	}

	.head {
		width: 92%;
		height: 280upx;
		margin: 30upx auto;
		margin-bottom: 20upx;
		border-radius: 30upx;
		background: #FF9900;
		display: flex;
		justify-content: center;
	}

	.head i {
		color: #FFFFFF;
		font-size: 120upx;
		line-height: 1;
	}

	.head_left {
		margin: auto;
		width: 50%;
		height: 212upx;
		text-align: center;
		/* border-right:1px solid rgba(255,255,255,0.6); */
	}

	.head_right {
		margin: auto;
		width: 50%;
		height: 212upx;
		text-align: center;
	}

	.head_left_title,
	.head_right_title {
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 46upx;
		color: #FFFFFF;
	}

	.head_left_num,
	.head_right_num {
		font-size: 36upx;
		color: #FFFFFF;
		line-height: 58upx;
	}

	.row1 {
		width: 92%;
		background: #FFFFFF;
		border-radius: 30upx;
		margin: auto;
		margin-bottom: 20upx;
	}

	.row1 .item {
		width: 90%;
		display: flex;
		justify-content: space-between;
		height: 98upx;
		line-height: 98upx;
		margin: auto;
		border-bottom: 1px solid rgba(229, 229, 229, 0.5);
	}

	.row1 .item:last-child {
		border: none;
	}

	.item_left {
		display: flex;
		justify-content: flex-start;
		line-height: 98upx;
	}

	.item_left text {
		color: #333333;
		font-size: 34upx;
	}

	.row1 .item .iconfont {
		font-size: 48upx;
		margin-right: 26upx;
	}

	.iconchongzhi,.iconyinhangka {
		color: #00ACFE;
	}

	.iconxueqingmingxi {
		color: #FF9900;
	}

	.iconwodedingdan {
		color: #00D5A2;
	}

	.iconjiantou {
		color: #999999;
		font-size: 36upx;
		line-height: 98upx;
	}
</style>
